<template>
  <!-- 预约日历 -->
  <section class="reserve-calendar">
    <el-form :inline="true" @submit.native.prevent="onGetData">
      <el-form-item>
        <!-- <el-select placeholder="选择科室" v-model="form.deptId" :remote-method="getDept" filterable remote clearable @clear="getDept" @change="onChangeDept">
          <el-option v-for="(item,index) in deptArray" :key="index" :value="item.deptId" :label="item.deptName"></el-option>
        </el-select> -->
        <deptSearch v-model="form.deptId" @change="onChangeDept"></deptSearch>
      </el-form-item>
      <el-form-item>
        <!-- <el-select placeholder="选择人员" v-model="form.doctorId" :remote-method="getUserList" filterable remote clearable @clear="getUserList">
          <el-option v-for="(item,index) in userArray" :key="index" :value="item.id" :label="item.trueName"></el-option>
        </el-select> -->
        <doctorSearch ref="doctorSearch" v-model="form.doctorId" :deptId="form.deptId"></doctorSearch>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.registerType" placeholder="预约类型" clearable>
          <el-option v-for="(item,index) in reserveTypeArray" :key="index" :value="item.id" :label="item.desc"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" circle icon="el-icon-search"></el-button>
      </el-form-item>
    </el-form>
    <table border="0" width="100%">
      <tr>
        <td width="250">
          <el-button-group>
            <el-button @click="onStep(0)"><i class="el-icon-arrow-left"></i>上个月</el-button>
            <el-button @click="onStep(1)">下个月<i class="el-icon-arrow-right "></i></el-button>
          </el-button-group>
        </td>
        <td style="text-align:center;">
          <h3 style="margin:0;">{{curDate|curDateStr}}</h3>
        </td>
        <td width="250"></td>
      </tr>
    </table>
    <br><br>
    <reserveCalendar :curDate="curDate" :form="form" ref="reserveCalendar"></reserveCalendar>
  </section>
</template>
<script>
export default {
  props: ["qxBtns"],
  filters: {
    curDateStr(value) {
      let yue = value.getMonth() + 1;
      if (yue < 10) yue = `0` + yue;
      return `${value.getFullYear()}-${yue}`;
    }
  },
  components: {
    reserveCalendar: () => import("@/pages/_com/reserveCalendar.vue"),
    deptSearch: () => import("@/pages/_com/deptSearch.vue"),
    doctorSearch: () => import("@/pages/_com/doctorSearch.vue")
  },
  data() {
    return {
      curDate: new Date(),
      curItem: null,
      form: {
        deptId: "",
        doctorId: "",
        registerType: "",
        month: ""
      },
      reserveTypeArray: [] //预约类型
    };
  },
  mounted() {
    let th = this;
    th.getCommonConfigByKey("预约类型").then(res => {
      th.reserveTypeArray = res;
    });
  },
  methods: {
    onGetData() {
      let th = this;
      th.$nextTick(function() {
        th.$refs["reserveCalendar"].getData();
      });
    },
   
    //上下月
    onStep(type) {
      let th = this;
      let newDate = new Date(th.curDate);
      if (type == 0) {
        //上
        newDate.setMonth(newDate.getMonth() - 1);
      } else {
        newDate.setMonth(newDate.getMonth() + 1);
      }
      th.curDate = newDate;
      th.onGetData();
    },
    //科室改变
    onChangeDept() {
      let th = this;
      th.form.doctorId = "";
      th.$nextTick(function() {
        th.$refs["doctorSearch"].getData();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.reserve-calendar {
}
</style>

